<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!--  准备好一个容器  -->
    <div id="test"></div>

    <!--  引入react核心库  -->
    <script type="text/javascript" src="../../js_base/react.development.js"></script>
    <script type="text/javascript" src="../../js_base/react-dom.development.js"></script>
    <script type="text/javascript" src="../../js_base/babel.min.js"></script>

    <!--  需要使用babel  -->
    <script type="text/babel">
        
        class Demo extends React.Component{

            // React.createRef调用之后，会返回一个容器，用于存储被ref标签所标识的节点
            // React.createRef创建的每一个容器，只能用于存储一个节点，后放入的节点会覆盖原有的节点
            myRef = React.createRef()

            render(){
                return(
                    <div>
                        {/* 使用this.myRef，React识别到传给ref标签的是一个通过createRef创建的容器后，会将当前DOM节点存放在myRef中 */}
                        <input ref={this.myRef} type="text" placeholder="点击按钮提示数据"/>
                        <button ref="button1" onClick={this.showData}>点我提示左侧数据</button>
                    </div>
                )
            }

            showData = () => {
                // myRef中有一个k-v，key是React固定的“current”，v是当前DOM节点
                alert(this.myRef.current.value)
            }
        }
        // 渲染组件到页面
        ReactDOM.render(<Demo/>, document.getElementById('test'));

    </script>

</body>
</html>